<template>
  <div class="page">
    <!-- 顶部导航栏 -->
    <header class="topbar">
      <el-button text @click="$router.push('/')">
        <el-icon><ArrowLeft /></el-icon> 返回
      </el-button>
      <span class="title">交流平台</span>
      <span style="width: 50px"></span>
    </header>

    <!-- 页面内容 -->
    <section class="content">
      <h2>🌱 植物爱好者交流</h2>
      <p>分享经验，互相学习，共同守护绿色家园</p>

      <el-card v-for="(post, index) in posts" :key="index" class="post-card">
        <h3>{{ post.title }}</h3>
        <p>{{ post.content }}</p>
      </el-card>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const posts = ref([
  { title: '番茄叶子发黄', content: '是不是缺少氮肥？大家有什么经验吗？' },
  { title: '玫瑰花病斑', content: '叶片出现黑点，求推荐有效的处理方法。' },
  { title: '新手养兰花', content: '请问兰花适合放在室内还是阳台？' },
])
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 50px;
  background: #a5d6a7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #2e7d32;
  font-weight: bold;
}

.title {
  font-size: 16px;
}

.content {
  flex: 1;
  padding: 20px;
}
.content h2 {
  text-align: center;
  color: #2e7d32;
  margin-bottom: 10px;
}
.content p {
  text-align: center;
  color: #388e3c;
  margin-bottom: 20px;
}
.post-card {
  margin-bottom: 15px;
  border-radius: 12px;
  background: #ffffff;
}
.post-card h3 {
  margin: 0 0 10px;
  color: #2e7d32;
}
.post-card p {
  margin: 0;
  color: #444;
}
</style>
